<template>
  <div class="container">
    <!-- 登录框 -->
    <div class="login_panel">
      <div class="title">
        <h2>欢迎登录</h2>
      </div>
      <div class="login_form">
        <el-form ref="form" :model="postData" label-width="80px">
          <el-form-item label="用户名:">
            <el-input v-model="postData.username"></el-input>
          </el-form-item>
          <el-form-item label="密码:">
            <el-input type="password" v-model="postData.user_password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="HandleLogin">登录</el-button>
            <el-button type="success" @click="goRegView">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
//导入异步请求模块中的对应方法
import { validateUser } from "@/api";

export default {
  name: "LoginView",
  data() {
    return {
      postData: {
        username: "",
        user_password: "",
      },
      //模拟响应对象
      res:{
        code:200,
        msg:"消息",
        data:{
          user:{
            username:"admin",
            user_role:'admin'
          },
          token:"测试token字符串"
        }
      }
    };
  },
  methods: {
    //登录方法
    async HandleLogin() {
      let res = this.res;
      if (res.code == 200) {
        //登录成功
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.$store.commit("loginToken", res.data.token);
        this.$store.commit('login',JSON.stringify(res.data.user));
        this.$router.push("./");
      } else {
        //登录失败
        this.$message.error(res.msg);
      }
    },
    //进入注册页面
    goRegView(){
        this.$router.push('./reg');
    }
  },
};
</script>
<style scoped>
.container {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

.login_panel{
	width: 400px;
	height: 500px;
}

.title{
	display: flex;
	justify-content: center;
	height: 50px;
	align-items: center;
}
</style>